import { Card, Col, Row, Typography } from 'antd';
import { useTranslation } from 'react-i18next';

import ahooksLogo from '@/assets/img/technologyStack/Ahooks.png';
import antdLogo from '@/assets/img/technologyStack/Antd.png';
import axiosLogo from '@/assets/img/technologyStack/Axios.png';
import jotaiLogo from '@/assets/img/technologyStack/Jotai.png';
import lodashLogo from '@/assets/img/technologyStack/Lodash.jpg';
import midwayLogo from '@/assets/img/technologyStack/Midway.png';
import momentLogo from '@/assets/img/technologyStack/Moment.png';
import passportLogo from '@/assets/img/technologyStack/Passport.png';
import reactLogo from '@/assets/img/technologyStack/React.png';
import reactRouterLogo from '@/assets/img/technologyStack/ReactRouter.jpg';
import scssLogo from '@/assets/img/technologyStack/Scss.jpg';
import tailwindLogo from '@/assets/img/technologyStack/Tailwind.png';
import typeormLogo from '@/assets/img/technologyStack/Typeorm.png';
import tsLogo from '@/assets/img/technologyStack/Typescript.jpg';
import valtioLogo from '@/assets/img/technologyStack/Valtio.png';
import webpackLogo from '@/assets/img/technologyStack/Webpack.png';

const { Meta } = Card;
const { Title } = Typography;

interface LogoCard {
  url: string;
  description: string;
  officialWebsite: string;
}

const TechnologyStack = () => {
  const { t } = useTranslation();

  const logoArr: LogoCard[] = [
    {
      url: reactLogo,
      description: 'React',
      officialWebsite: 'https://react.docschina.org/',
    },
    {
      url: reactRouterLogo,
      description: 'React-Router-Dom',
      officialWebsite: 'https://reactrouter.com/en/main',
    },
    {
      url: tsLogo,
      description: 'Typescript',
      officialWebsite: 'https://www.typescriptlang.org/',
    },
    {
      url: ahooksLogo,
      description: 'Ahooks',
      officialWebsite: 'https://ahooks.js.org/zh-CN/',
    },

    {
      url: valtioLogo,
      description: 'Valtio',
      officialWebsite: 'https://valtio.pmnd.rs/docs/api/basic/proxy',
    },
    {
      url: jotaiLogo,
      description: 'Jotai',
      officialWebsite: 'https://jotai.org/docs/guides/debugging',
    },

    {
      url: lodashLogo,
      description: 'Lodash',
      officialWebsite: 'https://lodash.com/docs/4.17.15#chunk',
    },
    {
      url: momentLogo,
      description: 'Moment',
      officialWebsite: 'http://momentjs.cn/',
    },
    {
      url: axiosLogo,
      description: 'Axios',
      officialWebsite: 'https://www.axios-http.cn/',
    },

    {
      url: antdLogo,
      description: 'Antd',
      officialWebsite: 'https://ant.design/components/overview-cn/',
    },
    {
      url: tailwindLogo,
      description: 'TailwindCSS',
      officialWebsite: 'https://tailwindcss.com/docs/installation',
    },
    {
      url: scssLogo,
      description: 'Scss',
      officialWebsite: 'https://www.sass.hk/',
    },
    {
      url: midwayLogo,
      description: 'Midway',
      officialWebsite: 'https://midwayjs.org/',
    },
    {
      url: passportLogo,
      description: 'Passport',
      officialWebsite: 'https://www.passportjs.org/',
    },
    {
      url: typeormLogo,
      description: 'Typeorm',
      officialWebsite: 'https://typeorm.bootcss.com/',
    },
    {
      url: webpackLogo,
      description: 'Webpack',
      officialWebsite: 'https://www.webpackjs.com/',
    },
  ];

  return (
    <>
      <Title italic level={3} style={{ marginBottom: 20 }}>
        {t('technologyStack')}
      </Title>
      <Row gutter={[0, 32]}>
        {logoArr.map((l, idx) => (
          <Col className="flex justify-center" xs={24} sm={12} md={12} lg={8} xl={6} xxl={6}>
            <a className="block w-full" key={idx} href={l.officialWebsite} target="_blank">
              <Card hoverable style={{ width: '90%' }} cover={<img alt="example" src={l.url} />}>
                <Meta title={l.description} description={l.officialWebsite} />
              </Card>
            </a>
          </Col>
        ))}
      </Row>
    </>
  );
};

export default TechnologyStack;
